<template>
  <el-card header="基础信息">
    <el-form
      ref="fillInEdit"
      :model="fillData"
      :rules="rules"
      label-width="120px"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="标题" prop="Title">
            <el-input
              v-model="fillData.Title"
              maxlength="100"
              placeholder="标题"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="填报类型" prop="FillType">
            <treeDicItem
              v-model="fillData.FillType"
              :dic-id="DictItemDic.fillInType"
              placeholder="填报类型"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择表单" prop="TableId">
            <formInput v-model="fillData.TableId" placeholder="选择表单" form-classify="01" :form-type="[0]" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="填报时间" prop="Time">
            <el-date-picker
              v-model="fillData.Time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="填报说明" prop="Show">
            <el-input
              v-model="fillData.Show"
              type="textarea"
              :rows="2"
              maxlength="255"
              placeholder="填报说明"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="24" style="text-align: center">
      <el-button
        type="primary"
        @click="save"
      >保存</el-button>
      <el-button @click="reset">重置</el-button>
    </el-row>
  </el-card>
</template>

<script>
import formInput from '@/customForm/components/form/formInput.vue'
import * as fillApi from '@/OA/api/fillIn'
import {
  DictItemDic
} from '@/OA/config/oaConfig'
export default {
  components: {
    formInput
  },
  props: {
    fillType: {
      type: String,
      default: null
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      fillData: {},
      title: '新增填报单',
      visible: false,
      rules: {
        Title: [
          {
            required: true,
            message: '填报单标题不能为空！',
            trigger: 'blur'
          }
        ],
        FillType: [
          {
            required: true,
            message: '填报单类型不能为空！',
            trigger: 'blur'
          }
        ],
        TableId: [
          {
            required: true,
            message: '填报表单不能为空！',
            trigger: 'blur'
          }
        ],
        Time: [
          {
            required: true,
            message: '填报时间不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    id: {
      handler(val) {
        this.reset()
      },
      immediate: true
    },
    fillType: {
      handler(val) {
        if (this.id == null) {
          this.fillData.FillType = val
        }
      },
      immediate: false
    }
  },
  methods: {
    async reset() {
      if (this.id != null) {
        const res = await fillApi.Get(this.id)
        this.title = '编辑填报单：' + res.Title
        this.fillData = {
          Title: res.Title,
          Show: res.Show,
          FillType: res.FillType,
          TableId: res.TableId,
          Time: [res.BeginDate, res.EndDate]
        }
      } else {
        this.title = '新增填报单'
        this.fillData = {
          Title: null,
          Show: null,
          FillType: this.fillType,
          TableId: null,
          Time: []
        }
      }
    },
    format() {
      return {
        Title: this.fillData.Title,
        Show: this.fillData.Show,
        FillType: this.fillData.FillType,
        TableId: this.fillData.TableId,
        BeginDate: this.fillData.Time[0],
        EndDate: this.fillData.Time[1]
      }
    },
    async set() {
      const data = this.format()
      await fillApi.Set(this.id, data)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('save', this.id)
    },
    async add() {
      const data = this.format()
      data.CompanyId = this.comId
      const id = await fillApi.Add(data)
      this.$message({
        message: '保存成功!',
        type: 'success'
      })
      this.id = id
      this.$emit('update:id', id)
      this.$emit('save', id)
    },
    save() {
      this.$refs['fillInEdit'].validate((valid) => {
        if (valid) {
          if (this.id == null) {
            this.add()
          } else {
            this.set()
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
